.cp-game-ready {
  position: fixed;
  z-index: 11;
  width: 100vw;
  max-width: var(--max-width);
  height: 100vh;
  // background: rgba(0, 0, 0, 0.7);
  // background: -moz-linear-gradient(to right, rgba(0, 0, 0, .15), rgba(0, 0, 0, .1), rgba(0, 0, 0, .15));
  // background: -o-linear-gradient(to right, rgba(0, 0, 0, .15), rgba(0, 0, 0, .1), rgba(0, 0, 0, .15));
  // background: -webkit-linear-gradient(to right, rgba(0, 0, 0, .15), rgba(0, 0, 0, .1), rgba(0, 0, 0, .15));
  // background: linear-gradient(to right, rgba(0, 0, 0, .15), rgba(0, 0, 0, .1), rgba(0, 0, 0, .15));


  > .inner {
    position: absolute;
    top: calc(50% + 29px);
    width: 100%;
    @include transform(translateY(-50%));

    > * {
      box-sizing: border-box;
    }

    > .cp-header {
      width: 100%;
      padding: 16px;
      font-size: 2rem;
      color: #fff;

      img {
        width: 100%;
        max-width: 100%;
        filter: drop-shadow(2px 4px 6px black)
      }
    }

    > .content {
      margin: 0 8vw;
      background: url(#{$base_path}/img/game/game-ready-bg.png);
      background-size: 100% 100%;
      overflow: hidden;
      min-height: 50vh;
      padding: 2rem;
      .cp-noti {
        // &:first-child
        margin-bottom: 6px;
        &:first-child {
          margin-top: 8px;
        }

        > .inner {
          text-align: center;
          img {
            width: 100%;
          }
          .ready-btn {
            position: absolute;
            right: 20px;
            top: 6px;
            padding: 2px 1.5rem;
            
            border-radius: 20px;
            span {
              font-size: 1.6rem;
            }
          }
          > .header {
            position: relative;
            padding: 8px 16px;

            .thumb {
              position: absolute;
              top: 6px;
              right: 16px;
              @include square(60px);
              background-size: contain;
              background-position: center;
              background-repeat: no-repeat;
              border: 3px solid #fff;
              @include borderRadius(50%);
              @include boxShadow(0 0 8px #23a7fd);
            }

            .tag {
              display: inline-block;
              font-size: 12px;
              border: 1px solid #fff;
              line-height: 12px;
              padding: 1px 5px 1px 10px;
              letter-spacing: 6px;
              @include borderRadius(10px);
              @include transform(scale(.9));
            }
          }

          > .content {
            padding: 8px 16px;
            height: 70px;
          }
        }
      }
    }

    > .footer {
      margin-top: 16px;
      text-align: center;
      display: flex;
      justify-content: space-around;

      .act-btn.act-btn-bevel {
        color: #fff;
      }
    }
  }

}

